<script setup>
import { defineProps, onMounted } from "vue";
import asideBar from './asideBar.vue'
const props = defineProps({
  loginShow: {
    type: Boolean,
    default: false
  },
  isLogin: {
    type: Boolean,
    default: true
  },
});

onMounted(() => {
  console.log(props.loginShow)
  // 监听按钮点击和键盘快捷键
  document.addEventListener('DOMContentLoaded', () => {
    const btn = document.getElementById('bookmarkBtn');

    // 按钮点击处理
    btn.addEventListener('click', showBookmarkHint);

    // 全局快捷键监听
    document.addEventListener('keydown', (e) => {
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'd') {
        e.preventDefault(); // 阻止浏览器默认保存行为
        showBookmarkHint();
      }
    });
  });

  // 显示收藏提示
  function showBookmarkHint() {
    const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
    const keyCombo = isMac ? 'Command+D' : 'Ctrl+D';

    // 现代浏览器提示方案
    if (window.chrome || window.safari) {
      showCustomHint(`
      <div class="hint-box">
        <h3>收藏本页到书签</h3>
        <p>1. 按下 <kbd>${keyCombo}</kbd></p>
        <p>2. 点击地址栏的 ★ 图标</p>
        <img src="bookmark-demo.gif" alt="操作演示" width="200">
      </div>
    `);
    }
    // IE 兼容方案
    else if (window.external && 'AddFavorite' in window.external) {
      window.external.AddFavorite(location.href, document.title);
    }
    // Firefox 兼容方案
    else if (window.sidebar && window.sidebar.addPanel) {
      window.sidebar.addPanel(document.title, location.href, "");
    }
  }

  // 自定义提示弹窗（替代原生alert）
  function showCustomHint(content) {
    const hint = document.createElement('div');
    hint.className = 'bookmark-hint';
    hint.innerHTML = content;

    // 点击外部关闭
    hint.addEventListener('click', () => hint.remove());

    document.body.appendChild(hint);
  }
})

</script>

<template>
  <asideBar></asideBar>
  <footer class="footer">
    <!-- 收藏提示区域 -->
    <div class="bookmark-bar">
      <div class="bookmark-content">
        <div class="bookmark-text">
          寻找出海新商机，就上「贸行四海]
          <div class="qrcode-wrapper">
            <img src="~/assets/images/logo/logo2.png" alt="logo">
            <div class="qrcode-popup">
              <img src="~/assets/images/logo/wx.png" alt="微信二维码">
              <div class="qrcode-text">扫码关注</div>
            </div>
          </div>
        </div>
        <div class="bookmark-shortcut">
          <span>按</span>
          <div class="shortcut-key">Ctrl</div>
          <span class="plus">+</span>
          <div class="shortcut-key">D</div>
          <span>一键收藏</span>
        </div>
      </div>
    </div>

    <!-- 页脚主要内容 -->
    <div class="footer-main">
      <div class="footer-content">
        <div class="footer-container">
          <!-- 公司介绍 -->
          <div class="company-intro">
            <h3 class="intro-title">贸行四海</h3>
            <p class="intro-text">
              贸行四海GotoSea123导航站，旨在成为中国企业全价值链出海的导航员。寻找出海新商机，就上「贸行四海]。
            </p>
          </div>

          <!-- 链接导航 -->
          <div class="footer-links" data-sdk-position="底部链接">
            <h3 class="links-title">链接</h3>
            <div class="links-grid">
              <NuxtLink :to="{ path: '/link/webLink', query: { link: '关于我们' } }">关于我们</NuxtLink>
              <NuxtLink :to="{ path: '/link/webLink', query: { link: '用户协议' } }">用户协议</NuxtLink>
              <NuxtLink :to="{ path: '/link/webLink', query: { link: '用户沟通' } }">用户沟通</NuxtLink>
              <NuxtLink :to="{ path: '/link/webLink', query: { link: '联系我们' } }">联系我们</NuxtLink>
            </div>
          </div>

          <!-- 联系方式 -->
          <div class="contact-info">
            <div class="contact-item">
              <img src="~/assets/images/logo/wx.png" alt="公众号">
              <span>公众号</span>
            </div>
            <div class="contact-item">
              <img src="~/assets/images/logo/wx-video.png" alt="视频号">
              <span>视频号</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 移动端页脚 -->
    <div class="footer-mobile">
      <div class="mobile-links">
        <a href="/"></a>
      </div>
      <div class="mobile-divider"></div>
      <section data-sdk-position="底部链接组">
        <div class="copyright-text">
          <span>声明:网站上的服务均为第三方提供,与贸行四海无关。请用户注意甄别服务质量,避免上当受骗。</span>
          |<span style="margin:0  10px;">粤ICP备2025404458号</span>
          |<span style="margin:0  10px;"> <img class="gongan-icon" src="~/assets/images/icon/gongan.png" alt="">
            <a href="https://beian.mps.gov.cn/#/query/webSearch?code=35010202001926" style="margin-left: 5px;"
              rel="noreferrer" target="_blank">闽公网安备35010202001926号</a>
          </span>
        </div>
      </section>
    </div>
  </footer>
</template>

<style scoped>
.footer {
  margin-top: auto;

  @media screen and (max-width: 991px) {
    display: none;
  }
}

/* 收藏提示区域样式 */
.bookmark-bar {
  padding: 5px 0;
  background: #FA8C1E;
}

.bookmark-content {
  height: 37px;
  margin: 0 auto;
  padding: 0 90px;
  display: flex;
  justify-content: space-between;
}

.bookmark-text {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

.qrcode-wrapper {
  display: flex;
  position: relative;
  cursor: pointer;
  margin-left: 12px;
}

.qrcode-wrapper img {
  width: 32px;
  height: 32px;
}

.qrcode-popup {
  display: none;
  position: absolute;
  left: calc(50% + 10px);
  top: -10px;
  transform: translate(-50%, -100%);
  width: 160px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px #2a61f11a;
  padding: 10px;
}

.qrcode-popup img {
  display: block;
  width: 140px;
  height: 140px;
}

.qrcode-text {
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #242528;
}

.qrcode-wrapper:hover .qrcode-popup {
  display: block;
}

.bookmark-shortcut {
  display: flex;
  align-items: center;
  color: #fff;
}

.shortcut-key {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 9px 18px;
  height: 37px;
  background: #fff;
  border-radius: 8px;
  color: #3b82f6;
  font-size: 14px;
  font-weight: 600;
  margin: 0 12px;
}

.plus {
  font-size: 20px;
}

/* 页脚主要内容样式 */
.footer-main {
  background: #26282c;
}

.footer-content {
  padding: 0 10px 12px 15px;
}

.footer-container {
  display: flex;
  color: #fff;
  margin: 0 70px;
}

.company-intro {
  width: 50%;
}

.intro-title {
  font-size: 23px;
  line-height: 24px;
  font-weight: 600;
  margin: 24px 0 20px;
  text-align: left;
}

.intro-text {
  font-size: 14px;
  color: #adb5bd;
  line-height: 24px;
  text-align: left;
}

.footer-links {
  margin: 0 auto 12px;
  width: 200px
}

.links-title {
  font-size: 22px;
  line-height: 24px;
  font-weight: 600;
  margin: 24px 0 22px;
  text-align: left;
}

.links-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 20px;
}

.links-grid a {
  font-size: 14px;
  color: #adb5bd;
  line-height: 20px;
  text-align: left;
}

.links-grid a:hover {
  color: #fff;
}

.contact-info {
  margin-top: 72px;
  display: flex;
}

.contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 32px;
}

.contact-item:last-child {
  margin-right: 0;
}

.contact-item img {
  width: 96px;
  height: 96px;
  margin-bottom: 8px;
}

.contact-item span {
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  color: #fff;
}

/* 移动端页脚样式 */
.footer-mobile {
  width: 100%;
  padding: 10px 30px 12px;
  background: #26282c;
}

.mobile-links {
  display: flex;
  height: 16px;
}

.mobile-links a {
  color: #adb5bd;
  font-size: 12px;
}

.mobile-divider {
  margin: 10px 0 8px;
  background: #4f5358;
  height: 1px;
}

.copyright-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #adb5bd;
  opacity: 0.75;
  font-size: 12px;
}

.gongan-icon {
  width: 18px;
  height: 20px;
  display: inline-block;
  vertical-align: text-bottom;
}

/* 响应式样式 */
</style>